<template>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="props.pageSizes"
        :small="props.small"
        :disabled="props.disabled"
        :background="props.background"
        :layout="props.layout"
        :total="props.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
</template>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue'

    const props = defineProps({
        // 分布组件布局，具体值请参数Elementplus的Pagination 分页
        layout: {
            type: String,
            default: "total, sizes, prev, pager, next, jumper"
        },
        // 每页显示个数选择器的选项设置
        pageSizes: {
            type: Array,
            default: [5, 10, 20, 30, 40, 50, 100]
        },
        // 总条目数
        total: {
            type: Number,
            default: 0
        },
        // 每页显示条目个数
        pageSize: {
            type: Number,
            default: 10
        },
        // 是否为分页按钮添加背景色
        background: {
            type: Boolean,
            default: true
        },
        // 是否使用小型分页样式
        small: {
            type: Boolean,
            default: false
        },
        // 是否禁用分页
        disabled: {
            type: Boolean,
            default: false
        }
    })
    /**
     * 初始化方法
     */
    onMounted(() => {
        pageSize.value = props.pageSize
    })

    /**
     * 当前页数和每页数量
     */
    const currentPage = ref(1)
    const pageSize = ref(10)

    /**
     * 当前页数发生变化时的处理事件
     */
    const handleCurrentChange = () => {
        emits('handleCurrentChange', currentPage.value, pageSize.value)
    }
    /**
     * 每页数量发生变化时的处理事件
     */
    const handleSizeChange = () => {
        emits('handleSizeChange', currentPage.value, pageSize.value)
    }
    /**
     * 定义发射给父组件的方法
     */
    const emits = defineEmits([
        'handleCurrentChange',
        'handleSizeChange'
    ])
</script>

<style scoped></style>